import { Component } from 'react';

import { Button, Avatar, Boxs, Group, TextField, Toast, TextareaField, Dialog,Badge,RadioField } from 'saltui';
import DB from '../../../app/db';
import './PageHome.less';
import { msgNoData } from '../../../app/variables';
import Time from './time.js';
import Answer from 'components/answer';

const numberFloatBlur = /^(-?\d+)(\.\d+)?$/;
const numberRegExp = /^-?\d+$/;
const { HBox, Box, VBox } = Boxs;
const {
  IconButton,
  ButtonGroup,
} = Button;
export default class PageHome extends Component {
  constructor(props) {
    super(props);
    let id = this.props.params.dataId;
    let type = this.props.params.status;
    let isAnwser = this.props.params.anwser;
    let anUserId = this.props.params.anUserId;
    let canToAnswer=this.props.params.canToAnswer;
    if(canToAnswer=='true'){
      canToAnswer=true;
    }else if(canToAnswer=='false'){
      canToAnswer==false;
    }

    this.state = {
      id: id,
      topicSetting:[],
      entity: {createdByName:''},
      titleSetting:{tFontSize:'',tFontFamily:'',bold:'',italic:'',underline:'',ezQuesColor:''},
      content:'2',
      curNo:0,
      totalNo:0,
      curPage:1,
      totalPage:0,
      typeName:'',
      // data:{
      //   "sinselect":[],
      //   "multiselect":[],
      //   "answer":[],
      //   "check":[],
      //   "fillInBlanks":[],
      //   "scale":[],
      //   "mulscale":[],
      //   "field":[]
      // },
      data:[],
      checkIsQuired:[],
      canAnswer:"", //是否可以答卷
      canToAnswer:canToAnswer,//是否可以再次答卷
      type: type, //是否是待答列表


      isAnwser:isAnwser,    //是否显示答案
      anUserId : anUserId, //查看指定用户的答案
      grade:0,
      messageShow:false,
      messageText:"",

      quesShow:true,
      needCheckRequired:true
    };
    //this.initTitle(status);
  }
  componentDidUpdate(){
    $("#titleDes").html(this.state.entity.titleDescription);
  }
  componentDidMount() {
    //获取表单信息
    let t = this;
    let id = t.state.id; 
    t.initData(id);
  }

  initTitle(status){
    let title = "详情";
    if(status == "0"){
      title = '答卷';
    }
    setTitle(title);
  }

  initData(id){
    let t = this;
    let isAnwser = t.state.isAnwser;
    let anUserId = t.state.anUserId;
    if(isAnwser == undefined || isAnwser == null || isAnwser == ''){
      isAnwser = "1";
    }
    if(anUserId == undefined || anUserId == null || anUserId == ''){
      anUserId = "";
    }
    DB.QuesModuleAPI.getDingQuesInfo({
      id: id,
      isAnwser:isAnwser,
      anUserId : anUserId,
    })
    .then((content) => {
      let isDeleted = content.isDeleted;
      if(isDeleted){
        t.setState({
          messageShow:isDeleted,
          messageText:"内容已删除"
        })
        return false;
      }
      
      if(content.entity.titleDescription == null||content.entity.titleDescription == ""){
        $("#titleDes").html("");
      }
      var titleSetting= {tFontSize:'',tFontFamily:'',bold:'',italic:'',underline:'',ezQuesColor:''};
      if(content.entity.titleSetting!=null){
        titleSetting = JSON.parse(content.entity.titleSetting);
      }
      var type=content.entity.typeName;
      let quesType = content.entity.type;
      var publish = content.entity.publish;
      var answerStatus = content.answerStatus;
      let quesShow = true;
      let needCheckRequired = true;
      if(t.state.type==0 && quesType == 'questionnaireExam') {
        //answerStatus == "1" ||  
        if(publish!=1 || (content.entity.passScore!='' && content.entity.passScore!=null && content.grade > content.entity.passScore) || (content.entity.answerNum!='' && content.entity.answerNum!=null && content.entity.answerNum <= content.answerNum)) {
          location.hash='questionnaire/exam_view/' + id; 
          return ;
        } else if (answerStatus == "4"){
          t.setState({
            messageShow:true,
            messageText:"试卷正在评卷中，请稍后查看！"
          })
          // Dialog.alert({
          //   title: '提示',
          //   content: '试卷正在评卷中，请稍后查看！',
          //   onConfirm() {
          //     history.back();
          //   }
          // }); 
          return ;
        } else{
          let endDate = content.entity.endDate;
          if(endDate != null) endDate = endDate.replace(/\-/g, "/");//IOS对时间字符串需要处理,"-"替换成"/"
          //有结束时间
          if(endDate != null && endDate != ""){
            let nowDate = new Date();
            let enDate = new Date(endDate);
            //结束时间小于等于当前时间
            if(enDate <= nowDate){
              let msg = '抱歉！此问卷已经于 ' + endDate.substring(0,16).replace(/\//g, "-") + ' 结束，不能再作答！';
              Dialog.alert({
                title: '提示',
                content: msg,
                onConfirm() {
                  history.back();
                },
              });
              return;
            }else{//结束时间大于当前时间
              needCheckRequired = false;
            }
          }
        }
        let startDate = content.entity.startDate;
        if(startDate != null) startDate = startDate.replace(/\-/g, "/");//IOS对时间字符串需要处理,"-"替换成"/"
        //有开始时间
        if(startDate != null && startDate != ''){
          var nowDate = new Date();
          var staDate = new Date(startDate);
          //开始时间大于当前时间
	    	  if(staDate > nowDate){
            quesShow = false;
          }
        }
      }
      var canAnswer = "1";
      if(t.state.type==0 &&publish=="1"){
        if(t.state.canToAnswer && quesType == 'questionnaireExam'){
          canAnswer = "0";
        }
        if(answerStatus =="0" && quesType != 'questionnaireExam'){
          canAnswer = "0";
        }
      }
      t.initTitle(canAnswer);
      let _topicSetting = content.topicSetting;
      let _totalPage = 0;
      if(_topicSetting != null && _topicSetting.length > 0){
        _totalPage = parseInt(_topicSetting[_topicSetting.length-1].page);
      }
      t.setState({
        typeName:type,
        topicSetting:_topicSetting,
        titleSetting:titleSetting,
        entity:content.entity,
        totalNo:content.topicSetting.length-1,
        totalPage:_totalPage,
        canAnswer: canAnswer,
        quesShow:quesShow,
        needCheckRequired:needCheckRequired
      }, function() {
        // 考试类型答卷5分钟定时保存
        if (t.state.entity.type == "questionnaireExam") {
          setTimeout(function(){
            t.examSubmit("1");
          },1000*60*5);
        }
      });
    }).catch((error) => {
      console.error(error);
    });
  }

  //编辑日志
  editLog() {
    location.hash = "report/log_add/" + this.state.formData.id;
  }


  handleClick(no){
    if(this.state.canAnswer=="0" && no == 1 && !this.pageCheck()) return false;
    let curPage = this.state.curPage;
    this.setState({
      curPage:curPage+no
    },function(){
      window.scrollTo(0,0);
    });
  }

  pageCheck(){
    let t = this;
    if(!t.state.needCheckRequired) return true;//不需要校验
    var data = t.state.data;
    for(var i=0; i<data.length; i++){
      var item = data[i];
      var topicNameTxt = "第" + item.topicNo + "题";
      if(parseInt(item.pageNo) == t.state.curPage && item.required==1){ //必填
        if(item.topicType == 'mulscale'){
          for(let j=0;j<item.answer.length;j++){
            if(item.answer[j].isAnswer=='0'){
              Toast.show({
                type: 'error',
                content: topicNameTxt+'没有完全选择或没选',
              });
              return false;
            }
          }
        }else if(item.topicType == 'answer'){
          var answerName = item.answer.trim();
          if(item.isAnswer==0){ //是否回答过
            Toast.show({
              type: 'error',
              content: topicNameTxt+'不能为空',
            });
            return false;
          }
          if(answerName==''&&item.isAnswer==1){
            Toast.show({
              type: 'error',
              content: topicNameTxt+'不能全部输入空格',
            });
            return false;
          }
          if(isEmojiCharacter(answerName)){
            Toast.show({
              type: 'error',
              content: topicNameTxt+'不能输入表情',
              onHide: function () {}
            });
            return false;
          }
        }else if(item.topicType == 'fillInBlanks'){
          for(var j=0;j<item.answer.length;j++){
            var answerName = item.answer[j].value.trim();
            var optionRequired = item.answer[j].optionRequired;
            if(JSON.parse(item.answer[j].optionSetting).charType=='float'){
              let number = '';
              let matches = answerName.match(numberFloatBlur);
              if (matches) {
                    number = matches[0];
              }
              if(answerName!='' && number==''){
                Toast.show({
                  type: 'error',
                  content: topicNameTxt+'的第'+(j+1)+'个填空只能输入数字',
                  onHide: function () {}
                });
                return false;
              }
            }else if(JSON.parse(item.answer[j].optionSetting).charType=='int'){
              let number = '';
              let matches = answerName.match(numberRegExp);
              if (matches) {
                    number = matches[0];
              }
              if(number==''&&answerName!=''){
                Toast.show({
                  type: 'error',
                  content: topicNameTxt+'的第'+(j+1)+'个填空只能输入整数',
                  onHide: function () {}
                });
                return false;
              }
            }
            if(optionRequired==1 && answerName==''){ //是否回答过
              Toast.show({
                type: 'error',
                content: topicNameTxt+'的第'+(j+1)+'个填空不能为空',
              });
              return false;
            }   
            if(isEmojiCharacter(answerName)){
              Toast.show({
                type: 'error',
                content: topicNameTxt+'的第'+(j+1)+'个填空不能输入表情',
                onHide: function () {}
              });
              return false;
            }   
          }
        }else{
          if(item.isAnswer==0){ //是否回答过
            Toast.show({
              type: 'error',
              content: topicNameTxt+'还未作答',
            });
            return false;
          }
        }
        if(item.topicType == 'field'){
          let id = item.answerIds.split("|");
          if(id.length>item.limitNo){
            Toast.show({
              type: 'error',
              content: topicNameTxt+'最多上传'+item.limitNo+'个附件',
              onHide: function () {}
            });
            return false;
          }
        }
        if(item.topicType=='fillInBlanks'){
          for(var j=0;j<item.answer.length;j++){
            var answerName = item.answer[j].value.trim();
            if(JSON.parse(item.answer[j].optionSetting).charType=='float'){
              let number = '';
              let matches = answerName.match(numberFloatBlur);
              if (matches) {
                number = matches[0];
              }
              if(answerName!='' && number==''){
                Toast.show({
                  type: 'error',
                  content: topicNameTxt+'的第'+(j+1)+'个填空只能输入数字',
                  onHide: function () {}
                });
                return false;
              }
            }else if(JSON.parse(item.answer[j].optionSetting).charType=='int'){
              let number = '';
              let matches = answerName.match(numberRegExp);
              if (matches) {
                number = matches[0];
              }
              if(number==''&&answerName!=''){
                Toast.show({
                  type: 'error',
                  content: topicNameTxt+'的第'+(j+1)+'个填空只能输入输入整数',
                  onHide: function () {}
                });
                return false;
              }
            }
            if(answerName !=''){
              if(isEmojiCharacter(answerName)){
                Toast.show({
                  type: 'error',
                  content: topicNameTxt+'不能输入表情',
                  onHide: function () {}
                });
                return false;
              }   
            }
          }
        }
        if(item.topicType == 'multiselect'){
          let num = 0;
          let min = JSON.parse(item.topicSetting).minMultiselect;
          let max = JSON.parse(item.topicSetting).maxMultiselect;
          for(let j=0;j<item.list.length;j++){
            if(item.list[j].checked==true){
              num += 1;
            }
          }
          if(item.isAnswer==1 && num==0){
            Toast.show({
              type: 'error',
              content: topicNameTxt+'还未作答'
            });
            this.setState({
              curNo:i
            });
            return;
          }
          if(item.required==1||num!=0){
            if(num<min || num>max){
              Toast.show({
                type: 'error',
                content: topicNameTxt+'最少选'+min+'项，最多选'+max+'项'
              });
              this.setState({
                curNo:i
              });
              return;
            }
          }
        }
      }
    }
    return true;
  }

  //提交
  submit(submitType,e){
    let t = this;
    var data = this.state.data;
    var returnData = [];
    let _submitType = submitType;
    for(var i=0; i<data.length; i++){
      var item = data[i];
      if(this.state.entity.type == 'questionnaireExam' && (item.topicType == 'shortAnswer' || item.topicType == 'field') && submitType == '1') _submitType = '4';
      if(t.state.needCheckRequired){
        var topicNameTxt = "第" + item.topicNo + "题";
        if(item.required==1){ //必须
          if(item.topicType == 'mulscale'){
            for(let j=0;j<item.answer.length;j++){
              if(item.answer[j].isAnswer=='0'){
                Toast.show({
                  type: 'error',
                  content: topicNameTxt+'没有完全选择或没选',
                });
                this.setState({
                  curNo:i
                });
                return;
              }
            }
          }else if(item.topicType == 'answer'){
            var answerName = item.answer.trim();
            if(item.isAnswer==0){ //是否回答过
              Toast.show({
                type: 'error',
                content: topicNameTxt+'不能为空',
              });
              this.setState({
                curNo:i
              });
              return;
            }
            if(answerName==''&&item.isAnswer==1){
                Toast.show({
                  type: 'error',
                  content: topicNameTxt+'不能全部输入空格',
                });
                this.setState({
                  curNo:i
                });
                return;
            }
            if(isEmojiCharacter(answerName)){
                Toast.show({
                type: 'error',
                content: topicNameTxt+'不能输入表情',
                onHide: function () {}
              });
                this.setState({
                  curNo:i
                });
              return;
            }
          }else if(item.topicType == 'fillInBlanks'){
            for(var j=0;j<item.answer.length;j++){
              var answerName = item.answer[j].value.trim();
              var optionRequired = item.answer[j].optionRequired;
              if(JSON.parse(item.answer[j].optionSetting).charType=='float'){
                let number = '';
                let matches = answerName.match(numberFloatBlur);
                if (matches) {
                      number = matches[0];
                }
                if(answerName!='' && number==''){
                  Toast.show({
                        type: 'error',
                        content: topicNameTxt+'的第'+(j+1)+'个填空只能输入数字',
                        onHide: function () {}
                    });
                    this.setState({
                      curNo:i
                  });
                    return;
                }
              }else if(JSON.parse(item.answer[j].optionSetting).charType=='int'){
                let number = '';
                let matches = answerName.match(numberRegExp);
                if (matches) {
                      number = matches[0];
                }
                if(number==''&&answerName!=''){
                  Toast.show({
                        type: 'error',
                        content: topicNameTxt+'的第'+(j+1)+'个填空只能输入整数',
                        onHide: function () {}
                    });
                    this.setState({
                      curNo:i
                  });
                    return;
                }
              }
              if(optionRequired==1 && answerName==''){ //是否回答过
                Toast.show({
                  type: 'error',
                  content: topicNameTxt+'的第'+(j+1)+'个填空不能为空',
                });
                this.setState({
                  curNo:i
                });
                return;
              }   
              if(isEmojiCharacter(answerName)){
                  Toast.show({
                  type: 'error',
                  content: topicNameTxt+'的第'+(j+1)+'个填空不能输入表情',
                  onHide: function () {}
                });
                this.setState({
                  curNo:i
                });
                return;
                }   
              }
          }else{
            if(item.isAnswer==0){ //是否回答过
              Toast.show({
                type: 'error',
                content: topicNameTxt+'还未作答',
              });
              this.setState({
                curNo:i
              });
              return;
            }
          }
          if(item.topicType == 'field'){
            let id = item.answerIds.split("|");
            if(id.length>item.limitNo){
              Toast.show({
                type: 'error',
                content: topicNameTxt+'最多上传'+item.limitNo+'个附件',
                onHide: function () {}
              });
              this.setState({
                curNo:i
              });
              return;
            }
          }
        }else{
          if(item.topicType == 'field'){
            if(item.isAnswer==1){
              let id = item.answerIds.split("|");
              if(id.length>item.limitNo){
                Toast.show({
                  type: 'error',
                  content: topicNameTxt+'最多上传'+item.limitNo+'个附件',
                  onHide: function () {}
                });
                this.setState({
                curNo:i
              });
                return;
              }
            }
          }
          if(item.topicType=='fillInBlanks'){
            for(var j=0;j<item.answer.length;j++){
              var answerName = item.answer[j].value.trim();
              if(JSON.parse(item.answer[j].optionSetting).charType=='float'){
                let number = '';
                let matches = answerName.match(numberFloatBlur);
                if (matches) {
                      number = matches[0];
                }
                if(answerName!='' && number==''){
                  Toast.show({
                        type: 'error',
                        content: topicNameTxt+'的第'+(j+1)+'个填空只能输入数字',
                        onHide: function () {}
                    });
                    this.setState({
                      curNo:i
                  });
                    return;
                }
              }else if(JSON.parse(item.answer[j].optionSetting).charType=='int'){
                let number = '';
                let matches = answerName.match(numberRegExp);
                if (matches) {
                      number = matches[0];
                }
                if(number==''&&answerName!=''){
                  Toast.show({
                        type: 'error',
                        content: topicNameTxt+'的第'+(j+1)+'个填空只能输入整数',
                        onHide: function () {}
                    });
                    this.setState({
                      curNo:i
                  });
                    return;
                }
              }
              
              if(answerName !=''){
                if(isEmojiCharacter(answerName)){
                  Toast.show({
                  type: 'error',
                  content: topicNameTxt+'不能输入表情',
                  onHide: function () {}
                });
                  this.setState({
                curNo:i
              });
                return;
                }   
              }
              
            }
          }
        }
        if(item.topicType == 'multiselect'){
          let num = 0;
          let min = JSON.parse(item.topicSetting).minMultiselect;
          let max = JSON.parse(item.topicSetting).maxMultiselect;
          for(let j=0;j<item.list.length;j++){
            if(item.list[j].checked==true){              
              num += 1;
            }
          }
          if(item.isAnswer==1 && num==0){
            Toast.show({
              type: 'error',
              content: topicNameTxt+'还未作答'
            });
            this.setState({
              curNo:i
            });
            return;
          }
          if(item.required==1||num!=0){
            if(num<min || num>max){
              Toast.show({
                type: 'error',
                content: topicNameTxt+'最少选'+min+'项，最多选'+max+'项'
              });
              this.setState({
                curNo:i
              });
              return;
            }
          }
        }
      }

      var dataItem = $.extend({},data[i]);
      var listOption = [];
      if(item.topicType == 'multiselect'){
          for(var k = 0;k<dataItem.list.length;k++){
            var val = '{"checked":"'+dataItem.list[k].checked+'","answerExt":"'+dataItem.list[k].answerExt+'"}';
            listOption.push(val);
          }
          dataItem.list= listOption;
      }else if(item.topicType == 'sinselect'){
        for(var k = 0;k<dataItem.list.length;k++){
          if(dataItem.list[k].checked) dataItem.answerExt = dataItem.list[k].answerExt;
        }
      }else{
        dataItem.list= "";
      }
      returnData.push(dataItem);
    }

    var id = this.state.id;
    DB.QuesModuleAPI.answerEdit({
      type:_submitType,
      entity: JSON.stringify(returnData),
      quesType:this.state.entity.type,
      grade:this.state.grade,
      quesId:id
    })
    .then((content) => {
      if(submitType=='2'){
        Toast.show({
          type: 'success',
          content: '保存成功',
         });
      }else{
        Toast.show({
          type: 'success',
          content: '提交成功',
       });
      }

      setTimeout(function(){
        location.hash = 'questionnaire/my_ques';
      },1000);
    }).catch((error) => {
      Toast.show({
        type: 'error',
          content: error.errorMsg,
       });
      return;
    });
    
  }

  examSubmit(timingFlag){
    var data = this.state.data;
    var returnData = [];
    let submitType = '1';
    for(var i=0; i<data.length; i++){
      let item = data[i];
      if(this.state.entity.type == 'questionnaireExam' && (item.topicType == 'shortAnswer' || item.topicType == 'field') && submitType == '1') submitType = '4';
      var dataItem = $.extend({},data[i]);
      var listOption = [];
      if(item.topicType == 'multiselect'){
          for(var k = 0;k<dataItem.list.length;k++){
            var val = '{"checked":"'+dataItem.list[k].checked+'","answerExt":"'+dataItem.list[k].answerExt+'"}';
            listOption.push(val);
          }
          dataItem.list= listOption;
      }else if(item.topicType == 'sinselect'){
        for(var k = 0;k<dataItem.list.length;k++){
          if(dataItem.list[k].checked) dataItem.answerExt = dataItem.list[k].answerExt;
        }
      }else{
        dataItem.list= "";
      }
      returnData.push(dataItem);
    }

    var id = this.state.id;
    DB.QuesModuleAPI.answerEdit({
      type:submitType,
      entity: JSON.stringify(returnData),
      quesType:this.state.entity.type,
      grade:this.state.grade,
      quesId:id,
      timingFlag:timingFlag
    })
    .then((content) => {
      if (timingFlag != "1") {
        Toast.show({
          type: 'success',
          content: '提交成功',
        });
  
        setTimeout(function(){
          location.hash = 'questionnaire/my_ques';
        },1000);
      }
    }).catch((error) => {
      Toast.show({
        type: 'error',
          content: error.errorMsg,
       });
      return;
    });
  }

  //组件回调
  change(returnData){
    let grade = 0;
    if(this.state.entity.type == 'questionnaireExam'){
      for(let i = 0; i < returnData.length; i++){
        let fraction = returnData[i].fraction;
        if(fraction != undefined && fraction != null && fraction != '') 
          grade += parseFloat(fraction);
      }
    }
    this.setState({
      data:returnData,
      grade:grade
    });
  }

  quesShowChange(flage){
    this.setState({
      quesShow:flage
    })
  }

  render() {
    const t = this;
    let messageShow = t.state.messageShow;
    let titleSetting= t.state.entity.titleSetting?JSON.parse(t.state.entity.titleSetting):"";
    let ezQuesColor= titleSetting?titleSetting.ezQuesColor:"";
    if(!messageShow){
      let quesType = t.state.entity.type;
      return (
        <div>
          {quesType == 'questionnaireExam' && t.state.type==0 ? 
            <Time 
              title={t.state.entity.name}
              startDate={t.state.entity.startDate}
              endDate={t.state.entity.endDate}
              showChange={(flage)=>{t.quesShowChange(flage)}}
              examSubmit={()=>{t.examSubmit("")}}/>
            : ""
          }
          <div className={this.state.quesShow ? "t-PL16 t-PR16 t-LH1_4 t-BCf" : "t-DN"}>
            <h1 className={"t-FS18 t-FAC t-PT20 t-PB12"+(ezQuesColor?"":"t-FC3")} style={ezQuesColor?{color:ezQuesColor}:{}}><b>{this.state.entity.name}</b></h1>
            <p className="t-FCddfontblue-60 t-PB20 t-FS16" id="titleDes"></p>
            {
              this.state.topicSetting.map(function(item,i){
                return (
                  <div key={i} className={t.state.curPage == item.page ? '':'t-DN'}>
                    {
                      item.illustrateList.map(function(val,i){
                        //防止xss攻击
                        if(/script|href|click/.test(val)){
                          val = "";
                        }
                        return (
                          <div className="t-PB18 t-PR">
                            <Box className="t-FC3 t-FS16">
                              <p dangerouslySetInnerHTML={{__html:val}}></p>
                            </Box>
                          </div>
                        )
                      }.bind(this))
                    }
                    <Answer keyNo={i} quesType={quesType} topicNo={item.topicNo} topic={item} canAnswer={t.state.canAnswer} data={t.state.data} onChange={this.change.bind(this)}/>
                  </div>)
              }.bind(this))
            }
            <div className="t-P0 t-PB30">
              <ButtonGroup>
                <Button className={this.state.curPage > 1?'':'t-DN'} type="secondary" display="inline" onClick={this.handleClick.bind(this,-1)}>上一页</Button>
                <Button className={this.state.curPage < this.state.totalPage?'':'t-DN'} type="primary" display="inline" onClick={this.handleClick.bind(this,1)}>下一页</Button>
                <Button className={quesType != 'questionnaireExam' && this.state.totalPage==this.state.curPage && this.state.canAnswer=="0"?'':'t-DN'} type="secondary" display="inline" onClick={this.submit.bind(this,'2')}>保存</Button>
                <Button className={this.state.totalPage==this.state.curPage && this.state.canAnswer=="0"?'':'t-DN'} type="primary" display="inline" onClick={this.submit.bind(this,'1')}>提交</Button>
              </ButtonGroup>
            </div>
          </div>
        </div>
      )
    }else{
      return (
        <div className="dd-state-page">
          <div className="dd-state-box">
            <VBox hAlign="center">
              <Box>
                <div>
                  <img src={msgNoData} alt="" />
                </div>
              </Box>
              <Box className="t-FS14 t-MT30 t-FAC t-LH1_3 t-FCddfontblue-40">
                {t.state.messageText}
              </Box>
            </VBox>
          </div>
        </div>
      )
    }
  }
}
